<template>
    <div class="myCartrow4div" style="margin-bottom:60px">
    <el-row class="myCartrow4" type="flex" justify="center">
        <el-col :span="17" class="myCartcol4left">
            <div class="myCartcol4leftdiv">请在倒计时结束前结算
                <el-tooltip content="● 好商品需要精挑细选，特意为你留足20分钟考虑时间；" placement="top-end" effect="light">
                    <span><i class="el-icon-question" style="color:blue;"></i></span>
                </el-tooltip>
            </div>
        </el-col>
        <el-col :span="7" class="myCartcol4right" :style="checkchangebtn">
            <div class="myCartcol4rightdiv" :style="checkchangeword" @click="GoOrder">立即结算
                <span class="Cartpaytime" v-show="timeshow">15 : 22</span>
            </div>
        </el-col>
    </el-row>
    </div>
</template>

<script>
    export default {
        name:'XiaoCartPayShow',
        data(){
            return{
                ShowCheckedCart:[],
                timeshow:1,     //需要全局传到4
                checkchangebtn:'',
                checkchangeword:'',
                paybtnchange:{
                    backgroundColor: "rgb(192, 192, 192)",
                    cursor: "not-allowed",
                },
                paywordchange:{
                    color: "rgb(133, 133, 133)",
                },
                TrueorFalse:false,
                AllowGoOrder:false,
            }
        },
        mounted(){
            this.checkchangebtn=this.paybtnchange
            this.checkchangeword=this.paywordchange
            this.timeshow=0

            this.$bus.$on('CPListtoCPShow',(TrueorFalse,ShowCheckedCart)=>{
                this.TrueorFalse=TrueorFalse
                this.ShowCheckedCart=ShowCheckedCart
            })      //如果把判断放这里只会执行一次

        },
        watch:{
            TrueorFalse(newval ,oldval){
                this.AllowGoOrder=newval
                if(newval == true){
                    this.checkchangebtn=this.checkchangeword=''
                    this.timeshow=1
                }else if(newval == false){
                    this.checkchangebtn=this.paybtnchange
                    this.checkchangeword=this.paywordchange
                    this.timeshow=0
                }
            }
        },
        methods:{
            GoOrder(){
                if(this.AllowGoOrder == true){
                    console.log('GoOrder!');
                    this.$router.push({
                        name:'xCreateOrder',
                        params:{data:this.ShowCheckedCart}})
                }
            },
        },
        beforeDestroy(){
            this.$bus.$off('CPListtoCPShow')
        },
    }
</script>

<style scoped>
.myCartrow4div{
    margin-top: -2px;
    margin-left: 35px;
    margin-right: 35px;
    border: 1px solid rgb(172, 172, 172);
    border-top: 0px;
}
.myCartrow4{
    height: 100%;
}
.myCartcol4left{
    height: 50px;
    background-color: rgb(236, 236, 236);
}
.myCartcol4leftdiv{
    opacity: 0.7;
    font-size: 14px;
    float: right;
    margin-top: 16px;
    margin-right: 15px;
}
.myCartcol4right{
    width: 30%;
    min-width: 280px;
    background-color: rgb(228, 67, 102);
    text-align: center;
    cursor: pointer;
    user-select: none;
}
.myCartcol4rightdiv{
    font-size: 20px;
    color: white;
    margin-top: 11px;
}
.Cartpaytime{
    margin-left: 8px;
    font-size: 13px;
}
</style>